<%@ page import="pro4.ProductDAO, pro4.Product, java.util.List" %>
<%
  ProductDAO dao = new ProductDAO();
  List<Product> products = dao.getAllProducts();
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>商品管理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f9f9f9;
    }
    .container {
      max-width: 1000px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
      text-align: center;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      padding: 12px;
      border-bottom: 1px solid #ddd;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    img {
      max-width: 100px;
      max-height: 100px;
      border-radius: 4px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input[type="text"], input[type="number"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .btn {
      padding: 10px 15px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn:hover {
      background-color: #45a049;
    }

    /* 弹窗样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fff;
      margin: 15% auto;
      padding: 20px;
      border-radius: 8px;
      width: 400px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .close-btn {
      float: right;
      cursor: pointer;
      font-size: 24px;
      font-weight: bold;
      color: #666;
    }
    .close-btn:hover {
      color: #000;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>商品管理</h1>

  <!-- 添加商品按钮（打开模态框） -->
  <!-- 居中的添加商品按钮 -->
  <div style="text-align: center; margin: 30px 0;">
    <button type="button" class="btn" onclick="openAddModal()">添加商品</button>
  </div>

  <!-- 商品列表 -->
  <h2 style="margin-top: 40px;">商品列表</h2>
  <table border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
      <th>图片</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <% for (Product p : products) { %>
    <tr>
      <td><%= p.getId() %></td>
      <td><%= p.getName() %></td>
      <td>¥<%= String.format("%.2f", p.getPrice()) %></td>
      <td><%= p.getStock() %></td>
      <td>
        <img src="<%= p.getImageUrl() != null ? p.getImageUrl() : "https://via.placeholder.com/100" %>"
             alt="商品图片" width="100" height="100" />
      </td>
      <td>
        <a href="javascript:void(0)" onclick="openEditModal('<%= p.getId() %>')">编辑</a>
        <a href="DeleteProductServlet?id=<%= p.getId() %>" onclick="return confirm('确定删除？')">删除</a>
      </td>
    </tr>
    <% } %>
    </tbody>
  </table>
</div>

<!-- 添加商品模态框 -->
<div id="addModal" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closeAddModal()">&times;</span>
    <h2>添加商品</h2>
    <form action="AddProductServlet" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label>ID：<input type="text" name="id" required></label>
      </div>
      <div class="form-group">
        <label>名称：<input type="text" name="name" required></label>
      </div>
      <div class="form-group">
        <label>价格：<input type="number" step="0.01" name="price" required></label>
      </div>
      <div class="form-group">
        <label>库存：<input type="number" name="stock" required></label>
      </div>
      <div class="form-group">
        <label>图片：<input type="file" name="image" accept="image/*" required></label>
      </div>
      <button type="submit" class="btn">添加商品</button>
    </form>
  </div>
</div>

<!-- 编辑商品模态框 -->
<% for (Product p : products) { %>
<div id="editModal_<%= p.getId() %>" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closeEditModal('<%= p.getId() %>')">&times;</span>
    <h2>编辑商品</h2>
    <form action="EditProductServlet" method="post" enctype="multipart/form-data">
      <input type="hidden" name="id" value="<%= p.getId() %>">
      <div class="form-group">
        <label>名称：<input type="text" name="name" value="<%= p.getName() %>" required></label>
      </div>
      <div class="form-group">
        <label>价格：<input type="number" step="0.01" name="price" value="<%= p.getPrice() %>" required></label>
      </div>
      <div class="form-group">
        <label>库存：<input type="number" name="stock" value="<%= p.getStock() %>" required></label>
      </div>
      <div class="form-group">
        <label>图片：<input type="file" name="image"></label>
      </div>
      <button type="submit" class="btn">保存修改</button>
    </form>
  </div>
</div>
<% } %>

<script>
  function openAddModal() {
    document.getElementById('addModal').style.display = 'block';
  }
  function closeAddModal() {
    document.getElementById('addModal').style.display = 'none';
  }

  function openEditModal(id) {
    document.getElementById('editModal_' + id).style.display = 'block';
  }
  function closeEditModal(id) {
    document.getElementById('editModal_' + id).style.display = 'none';
  }
</script>

</body>
</html>
